<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">
<ui:composition template="/template/master.xhtml">

	<ui:define name="tituloTamplate">Home | Pizzaria</ui:define>

	<ui:define name="conteudo">
		<p:layoutUnit position="center">
			<h:form id="form">
			<p:panelGrid id="panel" style="margin: 0 auto;">
			
				<p:row>
					<p:column colspan="3">
						<p:outputLabel value="Cliente " />
					</p:column>
				</p:row>
				
				<p:row>
					<p:column colspan="3">
						<p:autoComplete id="cliente" value="#{pedidoBean.cliente}" 
						completeMethod="#{pedidoBean.completeClient}" converter="clienteConverter" 
						var="cliente" itemLabel="#{cliente.nome}" itemValue="#{cliente}" size="37"/>
					</p:column>
				</p:row>
				
				<p:row>
					<p:column>
						<p:outputLabel value="Produto " />
					</p:column>
					<p:column colspan="2">
						<p:outputLabel value="Quantidade " />
					</p:column>
				</p:row>
				
				<p:row>
					<p:column>
						<p:autoComplete id="locationSelector" value="#{pedidoBean.produto}" 
						completeMethod="#{pedidoBean.completeProduct}" converter="produtoConverter" 
						var="produto" itemLabel="#{produto.nome}" itemValue="#{produto}" required="true"/>
					</p:column>
					
					<p:column>
						<p:inputText id="locationSelector2" value="#{pedidoBean.produto.quantidade}" size="8"/>
					</p:column>
					
					<p:column>
						<p:commandLink actionListener="#{pedidoBean.addProduto}"
							update="tableProdutos" immediate="true">
							<h:graphicImage library="images" name="add.png" />
							<p:ajax process="locationSelector"></p:ajax>
							<p:ajax process="locationSelector2"></p:ajax>
							<p:ajax update="panelTotal"></p:ajax>
							<p:ajax update="tableProdutos"></p:ajax>
						</p:commandLink>
					</p:column>
				</p:row>
				
			</p:panelGrid>
			
			<p:panelGrid id="panelTotal" style="margin: 0 auto;">
				<p:row>
					<p:column style="width: 222px;">
						<p:outputLabel value="Total: #{pedidoBean.total}" style="color: red;"/>
					</p:column>
					<p:column style="width: 150px;">
						<p:commandButton value="Vender" update="panelTotal" actionListener="#{pedidoBean.gravar}" 
						style="margin-left: 40px;"/>
					</p:column>
				</p:row>
			</p:panelGrid>
			
			<br />
			
			<center>
				<p:dataTable id="tableProdutos" var="produto"
					value="#{pedidoBean.listaProdutos}"
					emptyMessage="Nenhum registro" style="width: 600px;">
					
					<p:column headerText="Descrição do produto">
						<h:outputText value="#{produto.nome}" />
					</p:column>
	
					<p:column headerText="Preço"
						style="width: 70px; text-align: center;">
						<h:outputText value="#{produto.precoVenda}" />
					</p:column>
					
					<p:column headerText="Quantidade"
						style="width: 90px; text-align: center;">
						<h:outputText value="#{produto.quantidade}" />
					</p:column>
	
					<p:column style="width: 30px; text-align: center;">
						<p:commandLink title="Excluir" immediate="true">
							<p:commandLink title="Excluir"
								action="#{pedidoBean.removeProduto}"
								update="tableProdutos" immediate="true">
								<h:graphicImage library="images" name="delete.png" />
								<f:setPropertyActionListener
									target="#{pedidoBean.produto}" value="#{produto}" />
								<p:ajax update=":form:panelTotal"></p:ajax>
							</p:commandLink>
						</p:commandLink>
					</p:column>
				</p:dataTable>
			</center>
			</h:form>			
		</p:layoutUnit>
	</ui:define>
</ui:composition>
</html>